
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="content">
        <span id="ele">页面元素</span>
    </div>
    <input type="text" value="input" id="name">
    <a href="https://www.baidu.com">百度</a>
    <div style="color: red;">我是一个div</div>
    <button>点击一下</button>
    <ol>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ol>
    <script>
        // $("ol").append("append");
        // $("ol").prepend("prepend");
        // $("ol").after("after");
        // $("ol").before("before");
        //使用点击功能；
        $("#content").click(function(){
            //获取页面元素的内容；
            //console.log($(this).text);
            //console.log($(this).html);
            //console.log($("name").val);
            //修改页面元素的内容；
           // $(this).text("<h1>这是点击后的内容</h1>");
            //   $(this).html("<h1>这是点击后的内容</h1>");
            // $("#name").val("input111");
            // console.log($("a").attr("href"));
            // $("a").attr("href","http://www.youdao.com");
            //操作css;
            console.log($("div").css("color"));
            $("div").css("color","purple");
        })
        $(document).ready(function(){
            //弹框的使用；
            alert("页面加载完成");
        })
        $("button").click(function(){
            alert("弹框点击");
        })
    </script>
</body>
</html>